<template>
  <div class="flex">
    <vue-header title="消息" :visibleBackBtn="false" class="aaa"></vue-header>
    <infinite-container :loadMore="loadData" class="container" v-if="messagesData.status !== 5"
      :status="messagesData.status" :swipeDownRefreshMethod="() => this.loadData(true)"
    >
      <transition-group name="float">
        <message-item v-for="item in messagesData.data || []" :key="item.id" :data="item"
          @click.native="toInfoView(item.f_table, item[item.f_table], item)"
        ></message-item>
        <infinite-container-hint key="hint" :status="messagesData.status" :method="loadData"></infinite-container-hint>
      </transition-group>
    </infinite-container>      

    <div class="com-notData flex-grow" title="暂无内容" v-else></div>    
  </div>
</template>

<script>
import InfiniteContainer from '@c/InfiniteContainer'
import InfiniteContainerHint from '@c/InfiniteContainerHint'
import MessageItem from '@c/item/MessageItem'
import saveScroll from '@u/mixin/saveScroll.js'
export default {
  components: {
    InfiniteContainer,
    InfiniteContainerHint,
    MessageItem
  },

  mixins: [saveScroll],

  data (){
    return {
      messagesData: {
        data: null,
        page: 1,
        pageTotal: 1,
        status: 1
      }
    }
  },

  mounted (){
    this.loadData()
  },

  methods: {
    loadData (isSwipeDownRefresh = false){
      return new Promise((resolve, reject) =>{
        if((this.messagesData.page <= this.messagesData.pageTotal) || isSwipeDownRefresh){
          if(!isSwipeDownRefresh) this.messagesData.status = 2
          _api('message/getListByCon', {
            level: '0,1,2,3',
            page: isSwipeDownRefresh ? 1 : this.messagesData.page
          })
          .then(data =>{
            this.messagesData.status = 3
            if(!this.messagesData.data) this.messagesData.data = []
            this.messagesData.data = (isSwipeDownRefresh ? [] : this.messagesData.data).concat(data.data)
            this.messagesData.page = data.current_page
            this.messagesData.pageTotal = Math.ceil(data.total / data.per_page) || 1
            this.messagesData.page++
            if(this.messagesData.pageTotal === 1 && !this.messagesData.data.length){
              this.messagesData.status = 5
            }

            resolve()
          })
          .catch(() =>{
            this.messagesData.status = 0
            reject()
          })
        }else{
          this.messagesData.status = this.messagesData.data.length ? 4 : 5
          resolve()
        }
      })
    },

    toInfoView (type, data, item){
      item.is_read = 1
      _api('message/getById', { id: item.id })

      if(data){
        var query = { id: data.id }
        return {
          used_car: () => this.$toView('info/usedCar', { query }),
          sign: () => this.$toView('info/sign', { query }),
          seek: () => this.$toView('info/seek', { query: { id: data.id, type: data.seek_type } }),
          find: () => this.$toView('info/find', { query })
        }[type]()
      }else{
        this.$alert.toast('此条发布信息已被删除')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.aaa{
  background-color: linear-gradient('to right, red, blue');
  background-clip: text;
  color: transparent;
}
</style>